import React, { Component } from 'react';
import BaseHeader from '@/components/base/baseHeader';
import axios from 'axios';
import GlobalContent from '@/components/shiwen/common/GlobalContent';
import GlobalType from '@/components/shiwen/common/GlobalType';
import GlobalBottom from '@/components/base/GlobalBottom';
import { Pagination } from 'antd';
import './shiwen.scss';
import './../../data.js';
class Com extends Component {
    constructor (props) {
      super(props)
      this.state = {
        list:[],
        classname1:'iconfont icon-arrow-down',
        classname2:'iconfont icon-arrow-down',
        classname3:'iconfont icon-arrow-down'
      }
    }
  
    componentDidMount () {
      console.log(this.props);
      axios.get('/prolist',{dataType:'json'})
          .then((res) => {
            console.log(res.data.list)
            this.setState({
              list:res.data.list
            })
          })     
    }
    getAuto (event) {
      let classname = event.currentTarget.getAttribute('add');
        var middle = event.currentTarget.previousSibling;
        middle.style.height = 'auto'; 
      if (classname === 'classname1') {
        if(this.state.classname1 === 'iconfont icon-arrow-up') {
          this.setState({
            classname1:'iconfont icon-arrow-down'
          })
          middle.style.height = '30px';
        }else{
          this.setState({
            classname1:'iconfont icon-arrow-up'
          })
          middle.style.height = 'auto';
        }
      } else if (classname === 'classname2') {
        if(this.state.classname2 === 'iconfont icon-arrow-up') {
          this.setState({
            classname2:'iconfont icon-arrow-down'
          })
          middle.style.height = '30px';
        }else{
          this.setState({
            classname2:'iconfont icon-arrow-up'
          })
          middle.style.height = 'auto';
        }
      } else {
        if(this.state.classname3 === 'iconfont icon-arrow-up') {
          this.setState({
            classname3:'iconfont icon-arrow-down'
          })
          middle.style.height = '30px';
        }else{
          this.setState({
            classname3:'iconfont icon-arrow-up'
          })
          middle.style.height = 'auto';
        }
      }
    }
    onChange (page) {
      console.log(page);
    }
    render () {
      return (
        <div className = "container">
          <BaseHeader />
          <div className="containersWrap">
            <div className = "containers">
              <div className="shiwen_left">
                <div className="titletype clear">
                  <div className="son1">
                    <h1>不限<span>1 / 1000+页</span></h1>
                  </div>
                  <div className="type1">
                    <div className="tleft">
                      <span>类型：</span>
                    </div>
                    <div className="tmiddle">
                      {
                        this.state.list.map((item, index) => {
                          return (
                            <span key={index}>{item.type}</span>
                          )
                        })
                      }
                    </div>
                    <div className="tright" add=
                    'classname1' onClick={this.getAuto.bind(this)}>
                      <i className={this.state.classname1}></i>
                    </div>
                  </div>
                  <div className="type1">
                    <div className="tleft">
                      <span>作者：</span>
                    </div>
                    <div className="tmiddle">
                      {
                        this.state.list.map((item, index) => {
                          return (
                            <span key={index}>{item.name}</span>
                          )
                        })
                      }
                    </div>
                    <div className="tright" add=
                    'classname2' onClick={this.getAuto.bind(this)}><i className={this.state.classname2}></i></div>
                  </div>
                  <div className="type1">
                    <div className="tleft">
                      <span>朝代：</span>
                    </div>
                    <div className="tmiddle">
                      {
                        this.state.list.map((item, index) => {
                          return (
                            <span key={index}>{item.dynasty}</span>
                          )
                        })
                      }
                    </div>
                    <div className="tright" add=
                    'classname3' onClick={this.getAuto.bind(this)}><i className={this.state.classname3}></i></div>
                  </div>
                  <div className="son2">
                    <div className="tleft">
                      <span className="xingshi">形式：</span>
                    </div>
                    <div className="tmiddle">
                      <span>诗</span>
                      <span>词</span>
                      <span>曲</span>
                      <span>文言文</span>
                    </div>
                    <div className="tright"></div>
                  </div>
                </div>
                {
                  this.state.list.map((item, index) => {
                    return (
                      <GlobalContent key={index} data = {item} {...this.props}/>
                    )
                  })
                }
                <div className="shiwenpage" style={{width:'400px',height:'60px',lineHeight:'60px',margin:'0 auto'}}>
                  <Pagination simple defaultCurrent={1} total={50} onChange={this.onChange.bind(this)}/>
                </div>
              </div>
              <div className="shiwen_right">
                <div className="globalType">
                  <div className="type_title">
                    <div className="line"></div>
                    <b>类型</b>
                  </div>
                  <div className="type_cont">
                    {
                      this.state.list.map((item, index) => {
                        return (
                          <GlobalType key={index} data = {item}/>
                        )
                      })
                    }
                  </div>
                </div> 
                <div className="globalType">
                  <div className="type_title">
                    <div className="line"></div>
                    <b>作者</b>
                  </div>
                  <div className="type_cont">
                    {
                      this.state.list.map((item, index) => {
                        return (
                          // <GlobalAutor key={index} data = {item}/>
                          <span key={index}>{item.name}</span>
                        )
                      })
                    }
                  </div>
                </div> 
                <div className="globalType">
                  <div className="type_title">
                    <div className="line"></div>
                    <b>朝代</b>
                  </div>
                  <div className="type_cont">
                    {
                      this.state.list.map((item, index) => {
                        return (
                          // <GlobalAutor key={index} data = {item}/>
                          <span key={index}>{item.dynasty}</span>
                        )
                      })
                    }
                  </div>
                </div>
              </div> 
            </div>
            
            <GlobalBottom />
          </div>
        </div>
      )
    }
  }
  
  export default Com;